<script setup>
import { useTokenStore } from '@/stores/mytoken';
import { isCollapse } from './isCollapse';
import { getInfo,logout } from '@/api/users';
import { useRouter } from 'vue-router'

const router = useRouter();
const userInfo = ref({ portrait:"" , userName:"" });
  getInfo().then((res) => {
  console.log('用户信息:', res);
  userInfo.value = res.data.content;
  
})
getInfo().then((res) => {
  console.log('用户信息:', res);
  userInfo.value = res.data.content;
  

}).catch((err) => {
  console.error('获取用户信息失败:', err);
});
//退出登录
const handleLogout = async () => {
  //询问是否退出
  await ElMessageBox.confirm('确认要退出登录吗？','退出询问',{
     confirmButtonText: '确定',
     cancelButtonText:'取消',
     type:'warning',
  }).catch(()=> {
    ElMessage.info('已取消退出操作');
    return new Promise
    return;
  })
  //执行退出
  await logout().catch(()=>{})
  ElMessage.success('退出成功');
  //清空token,跳转到login页面
  const store = useTokenStore()
  store.saveToken('');
  router.push({ name: 'login'})
}

</script>


<template>
<el-header>

    <el-icon @click="isCollapse = !isCollapse">
        <IEpExpand v-show="isCollapse"/>
        <IEpFold v-show="!isCollapse"/>
    </el-icon>
<!-- 面包屑 -->
    <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="(item,index) in $route.matched"  :key = "index" :to="{ path: item.path }">{{ item.meta.title }}</el-breadcrumb-item>

    
  </el-breadcrumb>

  <!-- 下拉菜单 -->
 <el-dropdown>
    <span class="el-dropdown-link">
      <el-avatar 
      :size="36" 
      :src="userInfo.portrait"/>
      <el-icon class="el-icon--right">
        <i-ep-arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        
        <el-dropdown-item>{{ userInfo.userName }}</el-dropdown-item>
     
        <el-dropdown-item divided @click="handleLogout">退出登陆</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</el-header>

</template>

<style lang="scss" scoped>

.el-header {
    display: flex;
    align-items: center;
    background-color: #f5f7fa;
    .el-icon {
      
        margin-right: 20px;
    }
    
}
.el-dropdown{
    //放在右边
    margin-left: auto;
    .el-dropdown-link{
        display: flex;
        align-items: center;
        justify-content: center;

    }
}
</style>